<template>
    <div class="p10" style="height: calc(100vh - 190px);overflow: hidden;">
        <div class="title_r_box">
            <p class="tree_title">
                <span>分站以及测点配置</span>
            </p>
            <el-button v-if="userStore.modify" type="primary" class="w100" style="margin-bottom:10px;"
                @click="addstationBtn">
                <el-icon>
                    <Plus />
                </el-icon>新增分站
            </el-button>
            <el-input clearable v-model="state.treeSearch" @blur="treeSearchBlur" @keyup.enter="treeSearchBlur"
                placeholder="模糊搜索">
                <template #prefix>
                    <el-icon class="el-input__icon">
                        <search />
                    </el-icon>
                </template>
            </el-input>
        </div>
        <div style="height: calc(100vh - 320px);overflow-x: hidden;">
            <el-tree ref="pointtree" :data="datatreeList" :props="state.defaultProps" :highlight-current="true"
                node-key="value" @node-click="handleNodeClick" class="custom-tree"
                :current-node-key="state.curTreeId" :default-expanded-keys="state.defaultExpandedNodes" accordion
                :filter-node-method="filterNode">
                <template #default="{ node, data }">
                    <span class="custom-tree-node fsc" style="width: 100%;display: flex;justify-content: space-between;"
                        @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
                        <span>
                            <svg-icon v-if="data.children" icon-class="fenzhan" style="margin-right: 5px;" />
                            <span><span class="b" :class="{
                                'blue': node.data.pointTypeName == '普通',
                                'red': node.data.pointTypeName == '虚拟', 'zi': node.data.pointTypeName == '多参'
                            }">
                                    {{ node.data.pointTypeName }}</span>
                                <span v-if="node.data.controlPort"><span class="b grey">{{ node.data.controlPort }}</span>
                                    <span v-if="node.data.controlPortType == null"
                                        @click="addopenClickright(node.parent.parent.data.value)">
                                        <svg-icon class-name="search-icon" icon-class="mianxingtianjia" />
                                        <el-button type="primary" link>添加</el-button>
                                    </span>
                                </span>
                                <span v-if="node.data.controlPortType != null && node.data.controlPort">
                                    <el-tooltip class="box-item" effect="light"
                                        :content="node.data.id + '/' + node.data.controlPortTypeName + '/' + node.data.pointPlaceName"
                                        placement="right">
                                        {{ node.data.id }}/{{ node.data.controlPortTypeName }}/{{ node.data.pointPlaceName
                                        }}
                                    </el-tooltip>
                                </span>
                                <!-- <span
                                                    v-if="node.data.controlPortTypeName!=''&&node.data.controlPort">{{ node.data.controlPortTypeName }}/</span>
                                                <span
                                                    v-if="node.data.pointPlaceName!=null">{{ node.data.pointPlaceName }}</span> -->
                                <el-tooltip class="box-item" effect="light" :content="node.label" placement="right">
                                    {{ node.label }}
                                </el-tooltip>
                            </span>
                            <span v-if="data.children && data.value == 'noopen'">({{ node.parent.data.controlNum }}/{{
                                data.children.length }})</span>
                            <span v-if="data.children && data.value != 'nopoint' && data.value != 'noopen'">({{
                                data.totalNum
                                }})</span>
                            <span v-if="data.value == 'nopoint'">({{ data.children.length }})</span>
                        </span>
                        <span>
                            <!-- 测点添加 -->
                            <!-- 测点下拉无数据时不能新增 -->
                            <svg-icon v-if="data.value == 'nopoint' && userStore.modify && state.pointNoList.length > 0"
                                class-name="search-icon" icon-class="mianxingtianjia"
                                @click.stop="addtreePonit(data.id, node.parent.data.value)" />
                            <!-- 分站删除 -->
                            <svg-icon v-show="data.del" v-if="data.type == 'fenzhan' && userStore.modify"
                                class-name="search-icon" icon-class="mianxingshanchu"
                                @click.stop="deletetree(data.value)" />
                            <!-- 测点删除 -->
                            <svg-icon v-show="data.del" class="deleteIcon"
                                v-if="node.parent.data.value == 'nopoint' && userStore.modify" class-name="search-icon"
                                icon-class="mianxingshanchu" @click.stop="deletetreepoint(data.value)" />
                            <!-- 开出口删除 -->
                            <svg-icon v-show="data.del" class="deleteIcon"
                                v-if="node.parent.data.value == 'noopen' && node.data.controlPortType != null && userStore.modify"
                                class-name="search-icon" icon-class="mianxingshanchu"
                                @click.stop="delopenClick(node.data.controlPort, node.parent.parent.data.value)" />
                        </span>
                    </span>
                </template>
            </el-tree>
        </div>
    </div>
</template>

<script setup>
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
import axios from "@/utils/request"
defineProps({
    datatreeList: {
        type: Array,
        default: [],
    },
});

const emit = defineEmits();
const state = reactive({
    datatree: [],//树形数据
    addShowTtation: false,//新增分站弹框
    curTreeId: undefined,//当前树节点id
    treeSearch: undefined,//搜索
    defaultProps: {
        children: 'children',
        label: 'label',
    }, //左侧树形
    defaultExpandedNodes: [],

})
// 左侧树形上新增分站按钮点击事件
function addstationBtn() {
    emit('addstationBtn')
}
// 左侧树形搜索框
function treeSearchBlur(key) {
    emit('treeSearchBlur',state.treeSearch,1)
}
function handleNodeClick(data, node) {
    emit('handleNodeClick',data,node)
}
// 过滤节点
function filterNode(value, data) {
    if (!value) return true
    return data.label.includes(value)
}
function mouseenter(data) {
    data.del = true
}

function mouseleave(data) {
    data.del = false
}

</script>

<style lang="scss" scoped>
.title_r_box {
    height: 130px;
}
</style>
